<!doctype html>
<head>
<meta charset="utf-8">
<title>Html samples</title>
<link rel="stylesheet" type="text/css" href="share.css">
<style>

:root {
}

.bar {
	display: flex;
	--border-radius-size: 1em;
}

.bar .cell {
	flex-grow: 0;
	flex-shrink: 0;

	padding: 1em;
	border: 2px solid #666;

	/* Here, I use a nested flex-container to achieve the "vertical-align-center" effect. */
	display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */

    /* text-align: center; */
}

.bar .head {
	border-top-left-radius: var(--border-radius-size);
	border-bottom-left-radius: var(--border-radius-size);
}

.bar .tail {
	border-top-right-radius: var(--border-radius-size);
	border-bottom-right-radius: var(--border-radius-size);
}

</style>
</head>

<body>

	<div class="bar">
		<div class="cell head"
			style="flex-basis: 30%; background-image: linear-gradient(2deg, red, white);"
			>
			Cell 0
		</div>
		<div class="cell "
			style="flex-basis: 20%; background-image: linear-gradient(2deg, green, white);"
			>
			Cell 1
		</div>
		<div class="cell "
			style="flex-basis: 10%; background-image: linear-gradient(2deg, cyan, white);"
			>
			Cell 2
		</div>
		<div class="cell tail"
			style="flex-basis: 10%; background-image: linear-gradient(2deg, yellow, white);"
			>
			This is final cell, maybe shown with line breaks.
		</div>
	</div>


</body>
